<template>
  <div>
    <div class="box"></div>
    <Row>
      <Col v-if="info.a">
        {{ info?.a }}
        <Input v-model="info.obj.a" placeholder=""></Input>
      </Col>
    </Row>
    <Row>
      <Button type="default" @click="add">操作</Button>
    </Row>
    <Row>
      <Button type="default" @click="add2">操作2</Button>
    </Row>
    <div>
      {{ test1 }}
      <template v-if="test1.list">
        <input v-model="test1.list[0]" />
      </template>
      <button @click="add8">操作8</button>
      <button @click="add9">操作9</button>
    </div>
    <Row>
      {{ mySelect }}
      <Select v-model="mySelect.value" label-in-value @on-change="onChange">
        <Option v-for="(item, index) in mySelect.list" :key="index" :value="item.value">{{ item.label }}</Option>
      </Select>
    </Row>
  </div>
</template>
<script lang="jsx">
export default {
  data() {
    return {
      info: {},
      test1: {},
      mySelect: {
        value: [],
        list: [
          {
            label: '栏目1',
            value: 1
          },
          {
            label: '栏目2',
            value: 2
          }
        ]
      }
    }
  },
  methods: {
    onChange(e) {
      console.log(e)
    },
    add2() {
      this.$Modal.info({
        title: `标题`,
        render() {
          return <div>内容</div>
        }
      })
    },
    add9() {
      this.test1.list[0] = 100
    },
    add8() {
      this.test1 = Object.assign(
        {},
        {
          a: 1,
          b: 2,
          list: [1, 2, 3, 4, 5]
        }
      )
    },
    add() {
      console.log(`helloworld`)
      this.info = Object.assign(
        {},
        {
          a: 1,
          b: 2,
          list: [1, 2, 3, 4, 5],
          obj: {
            a: 1,
            b: 2
          }
        }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
